<template>
	<view class="" >
		<view class="select-tab">
			<view class="tabs" style="width: 60%; margin: 0 auto;background: #fff;">
				<v-tabs   v-model="activeTab"  :tabs="cateList"  @change="changeTab" :scroll="false" activeColor="#0068ff" lineColor="#0068ff" lineHeight="3px" height="90rpx" bold="true" />
			</view>
		</view>
		
		<!--诗歌列表-->
		<view class="poem-area" v-if="activeTab == 0" >
			<view class="act-list" v-if="poemsList.length > 0 ">
				<view class="act-item " v-for="(item,index) in poemsList" :key="index">
					<view class="top" @tap.stop="goto('/pages/post/comps/poemdetail?pid='+item.id)" >
						<view class="tui-news-picbox">	
							<block >
								<image :src="item.cover" mode="aspectFill" class="tui-block"></image>  
							</block>
						</view>
						<view class="tui-news-tbox tui-flex-column " >
							<view class="title" v-html="item.name"></view>
							<view class="desc">
								<view class="intro" v-html="item.intro"></view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="wait_check" v-if="item.check_id == '待审核' ">待审核</view>
						<view class="edit" @tap.stop="edit('/pages/post/comps/poemedit?pid='+item.id)">修改</view>
						<view class="del" @tap.stop="del(item.id,index)">删除</view>
					</view>
				</view>
			</view>
			
			<view class="none" v-if=" !poemsList.length">
				快来开始你的创作之旅吧~_~
			</view>
		</view>
		
		<!--文章列表-->
		<view class="novel-area" v-if="activeTab == 1">
			<view class="act-list" v-if="artList.length > 0 ">
				<view class="act-item " v-for="(item,index) in artList" :key="index">
					<view class="top" @tap.stop="goto('/pages/post/comps/articledetail?id=' + item.id)" >
						<view class="tui-news-picbox">	
							<block >
								<image :src="item.cover" mode="aspectFill" class="tui-block"></image>  
							</block>
						</view>
						<view class="tui-news-tbox tui-flex-column " >
							<view class="title" v-html="item.title"></view>
							<view class="desc">
								<view class="intro" v-html="item.intro"></view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="wait_check" v-if="item.check_id == '待审核' ">待审核</view>
						<view class="edit" @tap.stop="edit('/pages/post/comps/articleEdit?pid='+item.id)">修改</view>
						<view class="del" @tap.stop="del(item.id,index)">删除</view>
					</view>
				</view>
			</view>
			
			<view class="none" v-if=" !artList.length">
				快来开始你的创作之旅吧~_~
			</view>
		</view>
		
		<!--小说列表-->
		<view class="novel-area" v-if="activeTab == 2">
			<view class="act-list" v-if="novelsList.length > 0 ">
				<view class="act-item " v-for="(item,index) in novelsList" :key="index"  @tap.stop="goto('/pages/post/comps/noveldetail?nid='+ item.id  +'&action_nov_chapter=' + '' )" >
					<view class="top">
						<view class="tui-news-picbox">	
							<block >
								<image :src="item.cover" mode="aspectFill" class="tui-block"></image>  
							</block>
						</view>
						<view class="tui-news-tbox tui-flex-column " >
							<view class="title" v-html="item.name"></view>
							<view class="desc">
								<view class="intro" v-html="item.intro"></view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="edit" @tap.stop="edit('/pages/post/comps/noveledit?pid='+item.id)">修改</view>
						<view class="del" @tap.stop="del(item.id,index)">删除</view>
						<view class="manage" @tap.stop="goto('/pages/post/comps/novchapters/chapterList?nid='+item.id + '&action_nov_chapter=' +action_nov_chapter)">章节管理</view>
						<!-- <view class="total_clicked">总访问量:{{item.clicked}}</view> -->
					</view>
				</view>
			</view>
			
			<view class="none" v-if=" !novelsList.length">
				快来开始你的创作之旅吧~_~
			</view>
		</view>
		
		<view class="create-area">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="create" v-if="!had_phone">创作新作品</button>
			<view class="create" @tap="goto('/pages/post/comps/create?activeTab=' + activeTab )" v-else>创作新作品</view>
		</view>
		
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	
	export default {
		
		data() {
			return {
				use_share:this.use_share, //是否能显示创作区
				had_phone:this.$store.state.phone,  //验证用户是否绑定手机号
				action_nov_chapter:1,		//是否显示对小说章节进行删除，修改等操作
				activeTab:0,
				poemsList:[],
				novelsList:[],
				artList:[],
				cateList:[{name:'诗歌'},{name:'文章'},{name:'小说'}],
			}
		},
		
		async onShow() {	
			if(this.activeTab == 0) {
				this.poemsList = await api.GetPoems()
			}else if(this.activeTab == 1) {
				this.artList = await api.GetArticles()
			}else if(this.activeTab == 2) {
				this.novelsList = await api.GetNovels()
			}
		},
		
		methods:{
			
			async changeTab(e) {//切换选项，请求对应的数据
				this.activeTab = e
				if(this.activeTab == 0) {
					this.poemsList = await api.GetPoems()
				}else if(this.activeTab == 1) {
					this.artList = await api.GetArticles()
					console.log(this.artList);
					console.log(this.activeTab);
				}else if(this.activeTab == 2) {
					this.novelsList = await api.GetNovels()
				}
			},
			
				goto(url) {//相关页面跳转
				uni.navigateTo({
					url
				})
			},
			
			async deletePoem(id,index) {//删除诗歌
				let res = await api.DeletePoems(id)
				console.log(res);
				if(res.err == 0) {
					uni.showToast({
						title:res.msg
					})
					this.poemsList = await api.GetPoems()
				}
			},
			
			async delArt(id,index) {//删除文章
				let res = await api.DeleteArticle(id)
				console.log(res);
				if(res.err == 0) {
					uni.showToast({
						title:res.msg
					})
					this.artList = await api.GetArticles()
				}
			},
			
			async deleteNovel(id,index) {//删除小说
				let res = await api.DeleteNovel(id)
				console.log(res);
				if(res.err == 0) {
					uni.showToast({
						title:res.msg
					})
					this.novelsList = await api.GetNovels()
				}
			},
			
			del(id,index) {//删除操作
				var that = this
				uni.showModal({
					title:'提示',
					content:'确认删除',
					success:res => {
						if(res.confirm) {
							if(this.activeTab == 0) {
								this.deletePoem(id)
							}else if(this.activeTab == 1) {
								this.delArt(id,index)
							}else {
								this.deleteNovel(id,index)
							}
							
						}
					}
				})
			},
			
			edit(url) {//修改操作
				uni.navigateTo({
					url
				})
			},
			async getPhoneNumber (e) {//手机号授权
				console.log(e);
			　　if(e.detail.errMsg=="getPhoneNumber:ok"){
				console.log(e.detail.encryptedData,e.detail.iv);
			      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
						console.log('+++++++++++',res );
						let sres = await api.SetUserPhone(res.purePhoneNumber)
						console.log(sres);
						if(sres.err == 0) {
							this.$store.commit('setPhone',res.purePhoneNumber)
							console.log(this.$store);
							uni.showToast({
								title:sres.msg,
								duration:800
							})
						}
				}else{
			        console.log('用户点击了拒绝') ;   
			    }
			},
		}
	}
</script>

<style lang="scss">
.select-tab {
	width: 750rpx;
	top: 0;
	height: 90rpx;
	position: fixed;
	z-index: 99;
	background-color: #ffffff;
	background-color: #fff;
	border-bottom: 4rpx solid #F3F6F5;
}
.create-area {
	position: fixed;
	height: 150rpx;
	width: 750rpx;
	bottom: 0;
	background-color: #fff;
	border-top: 1rpx solid #F3F6F5;
	button {
		padding: 0;
		// margin: 0;
		// background: transparent;
		// display: flex;
		// align-items: center;
		font-size: 32rpx;
	}
}
.none {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.create {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 600rpx;
	height: 82rpx;
	margin: auto;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 82rpx;
	color: #FFFFFF;
	border-radius:60rpx;
	background-color: #0068FF;
	// position: fixed;
}
.poem-area,.novel-area {
  margin: 90rpx 0 165rpx;
	background: #F3F3F3;
}
.act-item {
	margin: 15rpx 0;
	padding: 10rpx 30rpx;
	background: #fff;
}
.act-list {
	margin-top: 110rpx;
	.top {
		display: flex;	
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
		padding: 10rpx 0 0;
	}
	.bottom {
		display: flex;
		position: relative;
		align-items: center;
		
		flex-direction: row-reverse;
		.del,.edit,.wait_check,.manage {
			width: 100rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 31rpx;
			font-size: 28rpx;
			color: #6E6E6E;
			margin: 10rpx 10rpx 0;
			border: 1rpx solid #EAEAEA;
		}
		.manage {
			width: 150rpx;
		}
		.wait_check {
			color: #DE5A54;
			border: 1rpx solid #E78680;
		}
		.total_clicked {
			font-size: 28rpx;
			position: absolute;
			left: 10rpx;
			color: #6E6E6E;
		}
	}
}

.tui-block {
	display: block;
}
.tui-news-tbox {	
	width: 480rpx;
	height: 140rpx;
	display: flex;
	margin-left: 20rpx;
	.title {
		font-size: 34rpx;
	}
	.desc {
		display: flex;
		font-size: 30rpx;
		.tip {
			width: 80rpx;
		}
		.intro {
			width: 400rpx;
			font-size: 30rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			color: #b2b2b2;
		}
	}
	
	.other {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;	
		font-size: 22rpx;
		margin-top: 6rpx;
		height: 30rpx;
		color: #999999;
		.visited {
			width: 150rpx;
		}
		.joined {
			// width: 200rpx;
		}
		.time {
			overflow: hidden;
			white-space: nowrap;
			// text-overflow: ellipsis;
		}
	}
}

.tui-news-picbox {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: space-between ;
	width: 180rpx;
	height: 140rpx;
	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}
.tui-flex-center {
	align-items: center !important;
}

.tui-flex-column {
	flex-direction: column ;
}

.tui-flex-between {
	justify-content: space-between ;
}
</style>
